<script setup>
  import { ref, reactive } from 'vue'
  import { addCourseService,editCourseService } from '@/api/user.js'
  const rules = {
    credit: [{ required: true, message: '勿空', trigger: 'blur' }],
    name: [{ required: true, message: '不能为空', trigger: 'blur' }],
    time: [{ required: true, message: '不能为空', trigger: 'blur' }],
    room: [{ required: true, message: '不能为空', trigger: 'blur' }],
    term: [{ required: true, message: '不能为空', trigger: 'blur' }],
  }

  const DrawerVisible = ref(false)

  const emit = defineEmits(['success'])

  const formModel = ref(
    {
      name: '',
      time: '',
      room: '',
      term: '',
      credit:''
    },
  );

  const onSubmit = async () => {
    if (formModel.value._id) {
      await ElMessageBox.confirm('你确认编辑吗', '温馨提示', {
      type: 'warning',
      confirmButtonText: '确认',
      cancelButtonText: '取消'
    })
      await editCourseService({id:formModel.value._id,
      course:formModel.value})
      ElMessage.success('编辑成功')
      DrawerVisible.value = false
      emit('success', 'edit')

    } else {
      await ElMessageBox.confirm('你确认添加吗', '温馨提示', {
      type: 'warning',
      confirmButtonText: '确认',
      cancelButtonText: '取消'
    })
      await addCourseService({ course: formModel.value })
      ElMessage.success('添加成功')
      DrawerVisible.value = false
      emit('success', 'add')
    }
    DrawerVisible.value = false

  }
  const open = async (row) => {
    DrawerVisible.value = true
    formModel.value = { ...row }
  }

  defineExpose({
    open
  })
  const options = [
    {
      value: '报到前',
      label: '报到前',
    },
    {
      value: '第一学期',
      label: '第一学期',
    },
    {
      value: '大一寒假',
      label: '大一寒假',
    },
    {
      value: '第二学期',
      label: '第二学期',
    },
    {
      value: '大一暑假',
      label: '大一暑假',
    },
    {
      value: '第三学期',
      label: '第三学期',
    },
    {
      value: '大二寒假',
      label: '大二寒假',
    },
    {
      value: '第四学期',
      label: '第四学期',
    },
    {
      value: '大二暑假',
      label: '大二暑假',
    },
    {
      value: '第五学期',
      label: '第五学期',
    },
    {
      value: '大三寒假',
      label: '大三寒假',
    },
    {
      value: '第六学期',
      label: '第六学期',
    },
    {
      value: '大三暑假',
      label: '大三暑假',
    },
    {
      value: '第七学期',
      label: '第七学期',
    },
    {
      value: '大四寒假',
      label: '大四寒假',
    },
    {
      value: '第八学期',
      label: '第八学期',
    },
    {
      value: '毕业后',
      label: '毕业后',
    }
  ]

</script>
<template>
  <el-drawer v-model="DrawerVisible" :title="formModel._id ? '编辑课程信息' : '添加课程信息'" direction="rtl" size="50%">
    <el-form :model="formModel" label-width="100px" :rules="rules">
      <el-form-item label="课程" prop="name">
        <el-input v-model="formModel.name" style="width: 150px;"></el-input>
      </el-form-item>
      <el-form-item label="学分" prop="credit">
        <el-input v-model="formModel.credit" style="width: 40px;"></el-input>
      </el-form-item>
      <el-form-item label="上课时间" prop="time">
        <el-input v-model="formModel.time" style="width: 110px;"></el-input>
      </el-form-item>
      <el-form-item label="上课地点" prop="room">
        <el-input v-model="formModel.room" style="width: 100px;"></el-input>
      </el-form-item>
      <el-form-item label="学期" prop="term">
        <el-select v-model="formModel.term" class="m-2" placeholder="请选择学期" style="width: 110px;">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>

    </el-form>
    <el-form-item>
   
      <el-button @click="onSubmit" type="primary">提交</el-button>
    </el-form-item>
  </el-drawer>
</template>